<template>
	<view class="scroll" :style="{height: scrollHeight}">
		<scroll-view :style="{height: scrollHeight}" scroll-y :scroll-into-view="scrollViewId">
			<view class="item-space"></view>
			<!-- <view class="time">{{traversalTime(new Date().getTime())}}</view> -->
			<view v-for="(item, index) in chatList" :key="index">
				<!--撤销-->
				<view v-if="item.msgType == 'cancel'" class="cancel">
					<text v-if="item.source == state.fromUserId" class="text">你撤回了一条消息</text>
					<text v-else class="text">成员 {{ item.source }} 撤回了一条消息</text>
				</view>
				<view v-else class="item flex-row" :class="[item.source == state.fromUserId ? 'right' : 'left']">
					<!--处理头像-->
					<view v-if="item.source == state.fromUserId">
						<image v-if="avatarUrl" :src="avatarUrl" class="face"></image>
						<!-- <image v-else src="/static/image/common/ai_head.png" class="face"></image> -->
					</view>
					<view v-else>
						<image v-if="item.toUserFace || item.userFace" :src="item.toUserFace || item.userFace"
							class="face"></image>
						<image v-else src="/static/image/common/ai_head.png" class="face"></image>
					</view>
					<!-- 文本 -->
					<!-- <view v-if="item.msgType == 'text'" @longpress="longPress(item)"
						:class="[item.source == state.fromUserId ? 'content-left' : 'content-right']"
						class="content fontS28 flex-row">
						{{ item.chatInfo }}
					</view> -->
					<view @longpress="longPress(item)"
						:class="[item.source == state.fromUserId ? 'content-left' : 'content-right']"
						class="content fontS28 flex-row">
						<!-- <text>{{item.chatInfo.replace(/\\n/g,'\n')}}</text> -->
						<!-- {{typingEffect('5555555555555')}} -->
						<rich-text :nodes="item.chatInfo"></rich-text>
					</view>
					<!-- 图片 -->
					<!-- 	<image class="image-style" v-if="item.msgType == 'image'" @longpress="longPress(item)"
						:src="item.content" mode="widthFix" style="width: 320upx;"></image> -->
					<!-- </view> -->
					<!--文本
					<view v-if="item.msgType == 'text'" @longpress="longPress(item)" class="content fontS28 flex-row">
						{{ item.content }}
					</view>-->
					<!--图片-->
					<!-- 	<image class="image-style" v-if="item.msgType == 'image'" @longpress="longPress(item)"
							:src="item.content" mode="widthFix" style="width: 320upx;"></image> -->
					<!--地图-->
					<!-- 	<view v-if="item.msgType == 'map'" class="content map" @tap="openLocation(item.content)">
						<view class="title">{{ item.content.address }}</view>
						<map class="box" :latitude="item.content.latitude" :longitude="item.content.longitude"
							:markers="[{latitude: item.content.latitude, longitude: item.content.longitude, iconPath: '../../static/image/common/marker.png'}]"
							@tap="openLocation(item.content)"></map>
					</view> -->
					<!--语音-->
					<!-- <view v-if="item.msgType == 'voice'" @tap="playVoice(item)"
						:class="[item.source == state.fromUserId ? 'content-left' : 'content-right']" class="content">
						<image v-show="state.voicePlayingId != item.id" src="../../static/image/common/audio.png"
							class="voice-icon"></image>
						<image v-show="state.voicePlayingId == item.id" src="../../static/image/common/audio-play.gif"
							class="voice-icon"></image>
					</view> -->
				</view>
			</view>
			<view id="bottom"></view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	import {
		traversalTime,
		typingEffect
	} from '@/utils/common.js';

	const emit = defineEmits([])

	const fromUserFace = ref(uni.getStorageSync('userFace'))
	// const props = defineProps(['chatList', 'scrollHeight', 'scrollViewId'])
	const props = defineProps({
		chatList: {
			type: Array,
			default: []
		},
		scrollHeight: {
			type: String,
			default: ''
		},
		scrollViewId: {
			type: String,
			default: ''
		}
	})
	const state = reactive({
		fromUserId: 1,
		voicePlayingId: '', // 正在播放的消息ID
	})

	const avatarUrl = ref('');

	onMounted(() => {
		const userInfo = JSON.parse(uni.getStorageSync('user_info'))
		avatarUrl.value = userInfo.user.userProfileImg;
	})
</script>

<style lang="scss" scoped>
	.scroll {
		overflow-y: auto;
		transition: all 0.1s ease;
		flex-grow: 1;
		padding-bottom: 20rpx;
		// height: calc(100vh - 88upx - 110upx - var(--status-bar-height));

		/* #ifdef MP-WEIXIN */
		// height: calc(100vh - 88upx - var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		// height: calc(100vh - 88upx - 110upx - var(--status-bar-height));
		/* #endif */

		.item-space {
			height: 30upx;
		}

		.time {
			color: #eee;
			font-size: 24upx;
			text-align: center;
			margin-bottom: 20upx;
		}

		.cancel {
			width: 100%;
			height: 40upx;
			text-align: center;
			margin-bottom: 30upx;

			.text {
				color: #999;
				font-size: 24upx;
			}
		}

		.item {
			margin: 0 30upx 30upx;
			align-items: flex-start;
			justify-content: flex-start;

			.image-style {
				margin-top: 30rpx;
				border-radius: 24rpx;
			}

			.face {
				width: 96upx;
				height: 96upx;
				border-radius: 50%;
			}

			.content-left {
				border-radius: 24rpx 0 24rpx 24rpx;
			}

			.content-right {
				border-radius: 0 24rpx 24rpx 24rpx;
			}

			.content {
				color: #FFFFFF;
				padding: 20upx 24upx;
				background-color: #888888;
				max-width: calc(100% - 100upx - 120upx);
				position: relative;
				margin-top: 16rpx;
				white-space: pre-wrap;
				word-break: break-all;
				word-wrap: break-word;

				.voice-icon {
					width: 28upx;
					height: 35upx;
					margin-right: 180upx;
					margin-bottom: -8upx;
				}
			}

			&.left {
				.face {
					margin-right: 30upx;
				}

				.content::before {
					left: -20upx;
				}
			}

			&.right {
				flex-direction: row-reverse;

				.face {
					margin-left: 30upx;
				}

				.content {
					background-color: #888888;
					color: #FFFFFF;
					margin-top: 30rpx;

					.voice-icon {
						margin-right: 0;
						margin-left: 180upx;
						transform: rotate(180deg);
					}
				}
			}
		}

		#bottom {
			height: 0;
		}
	}

	/* 打印效果 */
	@keyframes typing {
		from {
			width: 0;
		}

		to {
			width: 18em;
		}
	}

	/* 光标闪动 */
	@keyframes blink-caret {

		from,
		to {
			border-color: transparent;
		}

		50% {
			border-color: currentColor;
		}
	}


	.flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
</style>
